<template>
  <div class="details-header-info">
    <div class="kd"
         v-if="detailsData.orderstatus - '1' === 0 ||detailsData.orderstatus - '2' === 0 "
  
         @click="tologistics">
      <div class="img"
           v-if="detailsData.orderstatus - '1' === 0"></div>
      <div class="img-end"
           v-if="detailsData.orderstatus - '2' === 0"></div>
      <div class="kd-info">{{getStatusText}}</div>
      <div class="img-right">
        <div class="img-right-image"></div>
      </div>
    </div>
    <div class="info-dividing"></div>
    <div class="name-phone">
      <span class="name">{{detailsData.recipients}}</span>
      <span class="phone">{{detailsData.cellphone}}</span>
    </div>
    <div class="info-dividing"></div>
    <div class="info">{{detailsData.province}}{{detailsData.city}}{{detailsData.area}}{{detailsData.adress}}</div>
    <div class="info-dividing"></div>

  </div>
</template>

<script>
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  name: 'details-header-info',
  data () {
    return {
      headerList: [],
      type: 4
    }
  },
  computed: {
    getStatusText () {
      if (this.detailsData.orderstatus - '1' === 0) {
        return '商家正在通知快递公司揽件'
      } else {
        return '快件已签收'
      }
    },
    setIconImage () {
      let obj = this.headerList[this.type]
      if (obj) {
        return this.setLocalImg(obj.imgUrl)
        // backgroundImage: this.setLocalImg(obj.imgUrl),
        // backgroundSize: `${obj.width / 100}rem ${obj.height / 100}rem`,
        // width: `${obj.width / 100}rem`,
        // height: `${obj.height / 100}rem`
      }
    },
    setIconStyle () {
      let obj = this.headerList[this.type]
      if (obj) {
        return {
          width: `${obj.width / 100}rem`,
          height: `${obj.height / 100}rem`
        }
      }
    }
  },
  props: {
    detailsData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    tologistics () {
      this.$router.push({name: 'logistics-details', query: { orderid: this.detailsData.orderid }})
    },
    initObj () {
      this.spwanObj('icon-status-waitpay', '待付款', 31, 34)
      this.spwanObj('icon-status-close', '已关闭', 34, 34)
      this.spwanObj('icon-status-waitdelivery', '待发货', 34, 31)
      this.spwanObj('icon-status-delivery', '已发货', 34, 27)
      this.spwanObj('icon-status-success', '已完成', 34, 34)
    },
    spwanObj (imgUrl, text, width, height) {
      this.headerList.splice(this.headerList.length, 0, { imgUrl: imgUrl, text: text, width: width, height: height })
    }
  },
  mounted () {
    this.initObj()
    this.BIND_LOADING(false)
  }
}
</script>

<style lang="stylus" scoped>
.details-header-info {
  background: white;

  .kd {
    display: flex;
    height: 90px;
    align-items: center;
    padding-left: 16px;

    .img {
      background-image: url('~@image/icon-status-kd.png');
      background-size: 34px 33px;
      background-repeat: no-repeat;
      width: 34px;
      height: 33px;
    }

    .img-end {
      background-image: url('~@image/icon-status-end.png');
      background-size: 34px 33px;
      background-repeat: no-repeat;
      width: 34px;
      height: 33px;
    }

    .kd-info {
      margin-left: 20px;
      font-size: 28px;
      color: rgba(51, 51, 51, 1);
    }

    .img-right {
      margin-right: 36px;
      display: flex;
      flex: 1;
      justify-content: flex-end;

      .img-right-image {
        background-image: url('~@image/date-right.png');
        background-size: 14px 24px;
        background-repeat: no-repeat;
        width: 14px;
        height: 24px;
      }
    }
  }

  .name-phone {
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 20px;

    .name {
      font-size: 28px;
      color: rgba(51, 51, 51, 1);
    }

    .phone {
      font-size: 26px;
      color: rgba(51, 51, 51, 1);
      margin-left: 30px;
    }
  }

  .info {
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 16px;
    font-size: 28px;
    color: rgba(51, 51, 51, 1);
  }

  .info-dividing {
    width: 100%;
    height: 1px;
    background: RGBA(238, 238, 238, 1);
  }
}
</style>
